<template>
    <div class="win-esipsis-tip"
         :style="setWidth"
         v-on:mouseenter="onMouseenter">
        <el-tooltip v-if="isTip"
                    effect="dark"
                    :content="content"
                    :placement="placement"
                    :disabled="disabled">
            <span class="win-esipsis-tip__text"
                  ref="esipsis">
                <span v-if="$slots.default">
                    <slot></slot>
                </span>
                <span v-else>{{content}}</span>
            </span>
        </el-tooltip>
        <span v-else
              class="win-esipsis-tip__text"
              ref="esipsis">
            <span v-if="$slots.default">
                <slot></slot>
            </span>
            <span v-else>{{content}}</span>
        </span>
    </div>
</template>
<script>
export default {
    name: "EsipsisTip",
    props: {
        content: {
            type: String,
            default: ""
        },
        disabled: {
            type: Boolean,
            default: false
        },
        width: {
            type: [String, Number],
            default: "100%"
        },
        placement: {
            type: String,
            default: "top"
        }
    },
    data() {
        return {
            isTip: false
        };
    },
    computed: {
        setWidth() {
            const width = this.width;
            let style = {};
            if (width) {
                if (typeof width === "string") {
                    style.width = width;
                } else if (typeof width === "number") {
                    style.width = width + "px";
                }
            }
            return style;
        }
    },
    methods: {
        onMouseenter() {
            this.$nextTick(() => {
                const dom = this.$refs.esipsis;
                try {
                    if (dom && dom.scrollWidth && dom.scrollWidth > dom.offsetWidth) {
                        this.isTip = true;
                    } else {
                        this.isTip = false;
                    }
                } catch(err) {
                    this.isTip = false
                }
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.win-esipsis-tip {
    display: inline-block;
    &__text {
        display: inline-block;
        cursor: pointer;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
